<template>
  <div>
    <nav class="navbar navbar-light navbar-expand-md bg-white clean-navbar text-nowrap">
      <div class="container" style="float: left">
        <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navcol-1">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navcol-1">
          <ul class="navbar-nav">
            <li class="nav-item">
              <router-link to="/" style="text-decoration: none">
                <span class="nav-link bi-house" style="text-decoration-line: none;font-size: 16px"> 首页</span>
              </router-link>
            </li>
            <li class="nav-item">
              <el-dropdown>
                <span class="nav-link bi-handbag" style="text-decoration-line: none;font-size: 16px"> 商品分类<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                  <router-link to="/food"><el-dropdown-item class="el-icon-food"> 食品</el-dropdown-item></router-link>
                  <router-link to="/drink"><el-dropdown-item class="el-icon-cold-drink"> 饮料</el-dropdown-item></router-link>
                  <router-link to="/study"><el-dropdown-item class="el-icon-table-lamp"> 学习</el-dropdown-item></router-link>
                  <router-link to="/life"><el-dropdown-item class="el-icon-paperclip"> 生活</el-dropdown-item></router-link>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
            <li class="nav-item">
              <router-link to="/stores" style="text-decoration: none">
                <span class="nav-link bi-shop" style="text-decoration-line: none;font-size: 16px"> 店铺</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/tops" style="text-decoration: none">
                <span class="nav-link bi-star" style="text-decoration-line: none;font-size: 16px"> 排行榜</span>
              </router-link>
            </li>
            <li class="nav-item" v-show="isLogin">
              <router-link to="/carts">
                <span class="nav-link bi-cart" style="text-decoration-line: none;font-size: 16px"> 购物车</span>
              </router-link>
            </li>
            <li class="nav-item">
              <el-row style="margin-right: 10px">
                <el-col :span="20" style="height: 41px">
                  <el-input size="small" prefix-icon="el-icon-search" style="line-height: 41px" v-model="search"></el-input>
                </el-col>
                <el-col :span="4" style="height: 31px;margin-top: 5px">
                  <el-button size="small" type="primary" style="height: 31px" @click="searchInfo()">搜索</el-button>
                </el-col>
              </el-row>
            </li>


            <div>
              <div class="" v-show="!isLogin" style="">
                <router-link to="/login"><el-button type="text">登录</el-button></router-link>
                <router-link to="/signup"><el-button type="text">注册</el-button></router-link>
              </div>
              <div class="" v-show="isLogin" style="">
                <el-dropdown placement="bottom">
                  <span class="el-dropdown-link">
                    <el-button type="text">{{uname}}</el-button>
                   </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><router-link to="/infos"><el-button type="text" class="bi-info-circle"> 个人中心</el-button></router-link></el-dropdown-item>
                    <el-dropdown-item><el-button type="text" class="bi-box-arrow-right" @click="logout()"> 退出登录</el-button></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  name: "Header",
  props:[],
  data(){
    return{
      isLogin:'',
      uname:'',
      search:''
    }
  },
  methods:{
    logout(){
      this.isLogin = false;
      sessionStorage.clear();
      this.$router.push({path:'/'});
      this.$message.info("已退出登录");
    },
    login(){
      this.isLogin = true;
      this.uname = sessionStorage.getItem("uname");
    },
    searchInfo(){
      if (this.search === ""){
        this.$message.warning("请输入搜索内容");
      } else {
        this.$router.push({path:'/search',query:{search:this.search}})
      }
    },

  },
  created() {
    this.isLogin = sessionStorage.getItem("isLogin");
    this.uname = sessionStorage.getItem("uname");
  },
  updated() {

  }
}
</script>

<style scoped>
.float-right{
  float: right;
}
</style>
